<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="menuId"
      :indent="30"
      :columns="columns"
      :request-api="getTableList"
      :data="menuList"
      :pagination="false"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')" v-permission="'systemMenuAdd'"
          >新增菜单</el-button
        >
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="info" link :icon="View" @click="openDrawer('查看', scope.row.menuId)" v-permission="'systemMenuDetail'"
          >查看</el-button
        >
        <el-button
          type="primary"
          link
          :icon="CirclePlus"
          @click="openDrawer('新增', 0, scope.row.menuId)"
          v-permission="'systemMenuAdd'"
          >新增</el-button
        >
        <el-button
          type="warning"
          link
          :icon="EditPen"
          @click="openDrawer('编辑', scope.row.menuId)"
          v-permission="'systemMenuEdit'"
          >编辑</el-button
        >
        <el-button type="danger" link :icon="Delete" @click="deleteMenu(scope.row)" v-permission="'systemMenuDelete'"
          >删除</el-button
        >
      </template>
    </ProTable>
    <MenuDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="tsx" name="systemMenu">
import { ref } from "vue";
import { Menu } from "@/api/interface/systemMenu";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus, View } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import {
  getMenuListApi,
  addMenuApi,
  editMenuApi,
  deleteMenuApi,
  changeMenuVisibleApi,
  changeMenuStatusApi
} from "@/api/modules/menu";
import { menuStatus, menuVisible } from "@/utils/serviceDict";
import { useAuthPermissions } from "@/hooks/useAuthPermissions";
import MenuDrawer from "@/views/system/components/MenuDrawer.vue";
import { menuTreeHandle } from "@/utils/index";
import { useHandleData } from "@/hooks/useHandleData";

const proTable = ref<ProTableInstance>();

const menuList = ref<Menu.MenuListRes[]>([]);

const { PERMISSIONS } = useAuthPermissions();

// 获取菜单列表
const getTableList = async (params?: any) => {
  return getMenuListApi(params).then(res => {
    const { data } = res;
    if (data.length > 0) {
      menuList.value = menuTreeHandle(data, data[0].parentId);
    } else {
      menuList.value = [];
    }
  });
};

// 表格配置项
const columns: ColumnProps<Menu.MenuListRes>[] = [
  { prop: "menuName", label: "菜单名称", align: "left", search: { el: "input", props: { placeholder: "请输入菜单名称" } } },
  { prop: "icon", label: "图标", width: 50 },
  { prop: "menuSort", label: "排序", width: 50 },
  { prop: "permission", label: "权限标志" },
  { prop: "name", label: "路由名称" },
  { prop: "path", label: "菜单路径" },
  { prop: "component", label: "组件路径" },
  {
    prop: "visible",
    label: "显示状态",
    enum: menuVisible,
    render: scope => {
      return (
        <>
          {PERMISSIONS.value.systemMenuChangeVisible && scope.row.menuType == "C" ? (
            <el-switch
              model-value={scope.row.visible}
              active-text={scope.row.visible == 1 ? "显示" : "隐藏"}
              active-value={1}
              inactive-value={0}
              onClick={() => changeVisible(scope.row)}
            />
          ) : (
            <el-tag type={scope.row.visible == 1 ? "success" : "danger"}>{scope.row.visible == 1 ? "显示" : "隐藏"}</el-tag>
          )}
        </>
      );
    }
  },
  {
    prop: "status",
    label: "菜单状态",
    enum: menuStatus,
    search: { el: "select", props: { filterable: true } },
    render: scope => {
      return (
        <>
          {PERMISSIONS.value.systemMenuChangeStatus ? (
            <el-switch
              model-value={scope.row.status}
              active-text={scope.row.status == 1 ? "启用" : "禁用"}
              active-value={1}
              inactive-value={0}
              onClick={() => changeStatus(scope.row)}
            />
          ) : (
            <el-tag type={scope.row.status == 1 ? "success" : "danger"}>{scope.row.status == 1 ? "启用" : "禁用"}</el-tag>
          )}
        </>
      );
    }
  },
  { prop: "createTime", label: "创建时间" },
  { prop: "operation", label: "操作", width: "auto", fixed: "right" }
];

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof MenuDrawer> | null>(null);
const openDrawer = (title: string, menuId?: number, parentId?: number) => {
  const params = {
    title,
    isView: title === "查看",
    row: {},
    api: title === "新增" ? addMenuApi : title === "编辑" ? editMenuApi : undefined,
    getTableList: proTable.value?.getTableList,
    menuId: menuId,
    parentId: parentId
  };
  drawerRef.value?.acceptParams(params);
};

// 切换菜单显示状态
const changeVisible = async (params: Menu.MenuListRes) => {
  await useHandleData(
    changeMenuVisibleApi,
    { menuId: params.menuId, visible: params.visible == 1 ? 0 : 1 },
    `更改【${params.menuName}】菜单显示状态`
  );
  proTable.value?.getTableList();
};

// 切换菜单状态
const changeStatus = async (params: Menu.MenuListRes) => {
  await useHandleData(
    changeMenuStatusApi,
    { menuId: params.menuId, status: params.status == 1 ? 0 : 1 },
    `更改【${params.menuName}】菜单状态`
  );
  proTable.value?.getTableList();
};

// 删除菜单
const deleteMenu = async (params: Menu.MenuListRes) => {
  await useHandleData(deleteMenuApi, params.menuId, `删除【${params.menuName}】菜单`);
  proTable.value?.getTableList();
};
</script>
